<template>
	<view>
		<view  class="container">
			  <nav-header title="邀请记录" custom-nav></nav-header>
			   <view class="application-list" v-for="(group, date) in groupedApplications" :key="date">
				    <text>{{ date }}</text>
			     <view class="application-item" v-for="(app, index) in group" :key="index">
				   <view class="application-left">
					<image class="application-image" :src="app.image"></image>
			       <view class="application-details">
			         <view class="nickname">{{ app.nickname }}</view>
			         <view class="source">{{extractTime(app.time)}}</view>
			       </view>
				   </view>
			       <view class="application-buttons">
						<text>已同意</text>
			       </view>
			     </view>
			   </view>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted,computed } from 'vue';
	
	// 示例数据
	const applications = ref([
		{
				image: 'https://q1.itc.cn/q_70/images03/20240107/94ec1d6ce3b84a1faa95f52cd9aa998e.jpeg',
				nickname: '张三',
				time: "2024-11-30T12:34:56",
		},
		{
				image: 'https://q1.itc.cn/q_70/images03/20240107/94ec1d6ce3b84a1faa95f52cd9aa998e.jpeg',
				nickname: '张三',
				time: "2024-12-03T12:34:56",
		},
	  {
		image: 'https://q1.itc.cn/q_70/images03/20240107/94ec1d6ce3b84a1faa95f52cd9aa998e.jpeg',
		nickname: '张三',
		time: "2024-12-02T12:34:56",
	  },
	  {
		image: 'https://q7.itc.cn/q_70/images03/20240813/ebaeacc12a2d40e99cd1f0cff7cf29cd.png',
		nickname: '王五',
		time: "2024-12-02T12:34:56",
	  },
	  {
	  		image: 'https://q7.itc.cn/q_70/images03/20240813/ebaeacc12a2d40e99cd1f0cff7cf29cd.png',
	  		nickname: '王五',
	  		time: "2024-12-21T12:34:56",
	  },
	  {
	  		image: 'https://q7.itc.cn/q_70/images03/20240813/ebaeacc12a2d40e99cd1f0cff7cf29cd.png',
	  		nickname: '王五',
	  		time: "2025-01-11T12:34:56",
	  },
	  {
		image: 'https://q7.itc.cn/q_70/images03/20240813/ebaeacc12a2d40e99cd1f0cff7cf29cd.png',
		nickname: '李四',
		time: '2024-12-01T12:34:56'
	  },
	  {
		image: 'https://q7.itc.cn/q_70/images03/20240813/ebaeacc12a2d40e99cd1f0cff7cf29cd.png',
		nickname: '李四',
		time: '2024-12-01T12:34:56'
	  },
	  {
		image: 'https://q7.itc.cn/q_70/images03/20240813/ebaeacc12a2d40e99cd1f0cff7cf29cd.png',
		nickname: '李四',
		time: '2024-12-01T12:34:56'
	  }
	]);
	
	const groupByTime = (apps) => {
		console.log("apps",apps)
	  return apps.reduce((acc, app) => {
	    const dateObj = new Date(app.time);
		console.log("dateObj",dateObj)
	    if (!isNaN(dateObj.getTime())) { // 检查日期是否有效
	      const date = dateObj.toISOString().split('T')[0]; // 提取日期部分
	      if (!acc[date]) {
	        acc[date] = [];
	      }
	      acc[date].push(app);
	    } else {
	      console.warn(`Invalid date value: ${app.time}`); // 输出警告信息
	    }
	    return acc;
	  }, {});
	};
	

	// 新增的函数，用于对分组结果按照日期进行排序
	const sortGroupedByTime = (groupedApps) => {
	    return Object.fromEntries(
	        Object.entries(groupedApps)
	          .sort(([dateA], [dateB]) => new Date(dateB) - new Date(dateA))
	    );
	};

	// 处理时间 2024-12-01T12:34:56 => 12:34
	const extractTime = (timeStr) => {
	  const dateObj = new Date(timeStr);
	  if (isNaN(dateObj.getTime())) {
		throw new Error(`Invalid date value: ${timeStr}`);
	  }
	  const hours = dateObj.getHours();
	  const minutes = dateObj.getMinutes();
	  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
	};
	const groupedApplications = computed(() => {
	 const grouped = groupByTime(applications.value);
	 console.log("grouped",grouped)
	 console.log("分组后的数据:",sortGroupedByTime(grouped))
	return sortGroupedByTime(grouped);
	});
</script>

<style>
	.container{
		padding: 20rpx;
	}
	.application-item{
		height: 130rpx;
		display: flex;
		align-items: center; 
		justify-content: space-between;
	}
	.application-left{
		display: flex;
		gap: 20rpx;
	}
	.application-image{
		height: 100rpx;
		width: 100rpx;
	}
	.application-details {
	  flex-direction: column; /* 文字部分垂直排列 */
	  justify-content: space-between; /* 一个位于顶部，一个位于底部 */
	  gap: 5px; /* 文字之间的间距 */
	}
	
	.source{
		margin-top: 12rpx;
	}
	.application-buttons{
		display: flex;
		gap: 10px;
	}
	       
</style>
